<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
	</head>
	<body>
		<div class="preloader">
			<div class="counter">
				0
			</div>
		</div>
		<section>
			<h2>Welcome back to all!</h2>
			<p>
			    <span style="color: blue;">&lt;小明&gt;：</span>
			    <span style="color: black;">你好，有什么可以帮助你的吗？</span>
			  </p>
			  <p>
			    <span style="color: green;">&lt;小红&gt;：</span>
			    <span style="color: black;">你好！我有一个问题想请教你。</span>
			  </p>
			  <p>
			    <span style="color: blue;">&lt;小明&gt;：</span>
			    <span style="color: black;">没问题，请问你的问题是什么？</span>
			  </p>
			  <p>
			    <span style="color: green;">&lt;小红&gt;：</span>
			    <span style="color: black;">我想了解如何在 UniApp 中实现弹出软键盘。</span>
			  </p>
			  <p>
			    <span style="color: blue;">&lt;小明&gt;：</span>
			    <span style="color: black;">在 H5 页面中，你可以使用 JavaScript 的 <code>focus()</code> 方法，并结合 <code>setTimeout</code> 来实现延时获取焦点的效果。</span>
			  </p>
			  <p>
			    <span style="color: green;">&lt;小红&gt;：</span>
			    <span style="color: black;">明白了，谢谢你的帮助！</span>
			  </p>
		</section>
	</body>
	<script type="text/javascript">
		function counter(){
			var count = setInterval(function(){
				var c = parseInt($('.counter').text());
				$('.counter').text((++c).toString());
				if(c == 100){
					clearInterval(count)
					$('.counter').addClass('hide')
					$('.preloader').addClass('active')
				}
			})
		}
		counter()
	</script>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: Georgia, 'Times New Roman', Times, serif;
		}
		section{
			padding: 100px;
		}
		section h2{
			font-size: 4em;
			color: #4b656d;
		}
		section p{
			margin-top: 20px;
			font-size: 1.2em;
		}
		section span{
			display: block;
			font-size: 0.5em;
			color: #ff4983;
		}
		
		.preloader{
			position: fixed;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100vh;
			background: #070707;
			z-index: 10000000;
		}
		
		.preloader:before{
			content: 'Loading';
			position: absolute;
			font-size: 12em;
			font-weight: 900;
			text-transform: uppercase;
			color: rgba(225, 225, 225, .3);
		}
		
		.counter{
			position: relative;
			color: #fff;
			font-size: 16em;
			font-weight: 700;
			z-index: 1;
		}
		.counter:before{
			content: '%';
			font-size: 0.5em;
			
		}
		
		.hide{
			opacity: 0;
			transition: 1s;
			pointer-events: none;
		}
		
		.preloader.active{
			transform: translateY(-100vh);
			transition: ease-in-out 2s;
			transition-delay: 1s;
		}
		
	</style>
</html>